<template>
  <el-form :model="_form" inline>
    <el-form-item>
      <el-select v-model="_form.province" filterable placeholder="选择地区查询" clearable>
        <el-option value>请选择省</el-option>
        <el-option
          v-for="item in provinceOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="_form.province !== ''" label-width="0">
      <el-select v-model="_form.city" filterable placeholder="选择市查询" clearable>
        <el-option value>请选择市</el-option>
        <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item v-if="_form.city !== ''" label-width="0">
      <el-select
        v-model="_form.county"
        filterable
        placeholder="选择区县查询"
        clearable
        @change="search"
      >
        <el-option value>请选择区/县</el-option>
        <el-option
          v-for="item in countyOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <!-- <el-form-item prop="cls">
      <el-select v-model="_form.cls" filterable clearable placeholder="选择机构类型查询" @change="search">
        <el-option
          v-for="item in typeOptions"
          :key="item.code"
          :label="item.value"
          :value="item.code"
        />
      </el-select>
    </el-form-item>-->
    <el-form-item label class="w-auto">
      <search-input v-model="_form.name" placeholder="输入组织名称精确查询" @search="search" />
      <!-- <el-input v-model="_form.name" placeholder="请输入机构名称" @keyup.enter="search" /> -->
    </el-form-item>
    <!-- <el-form-item class="btn-search-item">
      <el-button type="primary" class="btn-search" @click="search">查询</el-button>
    </el-form-item>-->
  </el-form>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType, watch } from 'vue'

import SearchInput from '@/components/CommonSearch/SearchInput/index.vue'

import { useCity } from '&/utils/useCity'

import IBaseObj from '#/index'

const { cityOptions, countyOptions, getCityOptions, getCountyOptions }: IBaseObj = useCity()

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  provinceOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  typeOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
})

const emits = defineEmits(['update:form', 'search'])

const _form: IBaseObj = computed({
  get() {
    return props.form
  },
  set(val) {
    emits('update:form', val)
  },
})

watch(
  () => _form.value.province,
  (val) => {
    console.log('v', val)
    _form.value.city = ''
    _form.value.county = ''
    cityOptions.value = []
    countyOptions.value = []
    if (val !== '') {
      getCityOptions(val)
    }
    search()
  }
)

watch(
  () => _form.value.city,
  (val) => {
    _form.value.county = ''
    countyOptions.value = []
    if (val !== '') {
      getCountyOptions(val)
    }
    search()
  }
)

const search = () => {
  emits('search')
}
</script>

<style lang="scss" scoped>
.w-auto {
  :deep() {
    .el-form-item {
      &__content {
        width: auto;
      }
    }
  }
}
</style>
